<template>
  <section class="outer">
    <div class="pack">
      <div class="synopsis-top">
        <h3 class="synopsis-h3">评论</h3>
      </div>
      <ul class="comment-list">
        <li class="comment-item">
          <img src="/image/headpic/head1.jpg" alt="" class="comment-pic" />
          <div>
            <div class="comment-name">
              <a href="" class="comment-aa">宝儿盖</a>
              <span class="time">07-20</span>
              <span class="time ml-3">发表书评</span>
            </div>
            <div class="comment-content">
              <p>一定</p>
            </div>
            <div class="comment-an">
              <a href="script:void(0);" @click="favour">赞{{n}}</a>
              <a href="script:void(0);">回复</a>
            </div>
          </div>
        </li>
        <a href="" class="synopsis-aa">查看更多评论</a>
      </ul>
    </div>
  </section>
</template>
<script>
export default ({
  data() {
    return{
      n:""
    }
  },
  methods:{
    favour(){
      this.n++;
    }
  }
})
</script>

<style lang="scss">
.reda-a {
  color: #333;

  // padding: 20px;
}
.reda-a:hover {
  color: #333;
}
.synopsis-aa {
  display: block;
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 15px 0;
  color: #389eac;
}
.synopsis-aa:hover {
  color: #389eac;
}
.outer {
  width: 1200px;
  margin: 0 auto;
  .pack {
    width: 810px;
    margin: 0 auto;
    .synopsis-top {
      width: 100%;
      height: 33px;
      box-sizing: border-box;
      padding: 10px 13px;
      background-color: #eff2f3;
      .synopsis-h3 {
        font-size: 13px;
        color: #333;
      }
    }
  }
}
.comment-list {
  margin-top: 10px;
  .comment-item {
    height: 140px;
    padding: 0 20px 0 40px;
    position: relative;
    border-bottom: 1px solid #eee;
    .comment-pic {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .comment-name {
      line-height: 12px;
      .comment-aa {
        display: block;
        margin-right: 5px;
        font-weight: bold;
        font-size: 13px;
        color: #333;
      }
      .time {
        color: #a6a6a6;
        font-size: 12px;
      }
    }
    .comment-content {
      margin: 20px 20px 15px 0;
      padding: -1spx 12px;
      p {
        height: 23px;
        color: #333333;
        font-size: 13px;
        margin-bottom: 10px;
      }
    }
  }
}
.comment-an {
  position: relative;
}
.comment-an > a:nth-child(-n + 2) {
  text-decoration: none;
  display: inline-block;
  width: 60px;
  height: 30px;
  color: #333;
  line-height: 30px;
  font-size: 13px;
  margin-left: 8px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}
.comment-an > a:nth-child(1) {
  position: absolute;
  right: 70px;
}
.comment-an > a:nth-child(2) {
  position: absolute;
  right: 0;
}
.comment-an > a:nth-child(-n + 2):hover {
  background-color: rgb(56, 158, 172);
  color: rgb(255, 255, 255);
}
.comment-item > div:nth-child(2) {
  margin-left: 5px;
}
.synopsis-aa {
  display: block;
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 15px 0;
  color: #389eac;
}
.synopsis-aa:hover {
  color: #389eac;
}
</style>